<template>
    <div id="demo">
        <!-- <button @click="getList">getList</button> -->
        <div class="head">
            <router-link to="/" class="arrow">&larr;</router-link>
            <span>性能测试（500个）</span>
            <span style="color:green">{{renderState}}</span>
        </div>
        <power-drag ref="cyGridster" :your-list="myList" :base-margin-left="baseMarginLeft" :base-margin-top="baseMarginTop" :base-width="baseWidth"
            :base-height="baseHeight">
            <!-- <div v-for="(item,index) in myList" :slot="'slot'+index">
            
            </div> -->
        </power-drag>
    </div>
</template>

<script>
    import drag from './components/drag/drag.vue';
    import mock from "mockjs"
    import _ from "lodash";

    export default {
        data() {
            let list = mock.mock({
                // "myList|500": [{
                //     "id|+1": 1,
                //     x: '@integer(1,9)',
                //     y: '@integer(1,9)',
                //     sizex: '@integer(1,3)',
                //     sizey: '@integer(1,3)',
                // }]
                myList:[{"id":450,"x":2,"y":1,"sizex":1,"sizey":1},{"id":472,"x":3,"y":1,"sizex":3,"sizey":1},{"id":491,"x":6,"y":1,"sizex":2,"sizey":3},{"id":496,"x":8,"y":1,"sizex":2,"sizey":3},{"id":492,"x":4,"y":2,"sizex":2,"sizey":2},{"id":498,"x":1,"y":2,"sizex":2,"sizey":2},{"id":442,"x":8,"y":4,"sizex":2,"sizey":1},{"id":469,"x":2,"y":4,"sizex":1,"sizey":2},{"id":483,"x":5,"y":4,"sizex":2,"sizey":2},{"id":499,"x":7,"y":4,"sizex":1,"sizey":3},{"id":500,"x":1,"y":4,"sizex":1,"sizey":2},{"id":487,"x":8,"y":5,"sizex":2,"sizey":1},{"id":478,"x":1,"y":6,"sizex":1,"sizey":2},{"id":484,"x":8,"y":6,"sizex":2,"sizey":2},{"id":497,"x":5,"y":6,"sizex":2,"sizey":3},{"id":490,"x":8,"y":8,"sizex":3,"sizey":2},{"id":493,"x":1,"y":8,"sizex":3,"sizey":2},{"id":466,"x":6,"y":9,"sizex":2,"sizey":2},{"id":488,"x":8,"y":10,"sizex":3,"sizey":2},{"id":494,"x":1,"y":10,"sizex":2,"sizey":2},{"id":495,"x":3,"y":10,"sizex":2,"sizey":2},{"id":454,"x":6,"y":11,"sizex":1,"sizey":2},{"id":456,"x":7,"y":11,"sizex":1,"sizey":2},{"id":453,"x":4,"y":12,"sizex":2,"sizey":2},{"id":476,"x":8,"y":12,"sizex":2,"sizey":2},{"id":485,"x":2,"y":12,"sizex":1,"sizey":3},{"id":486,"x":6,"y":13,"sizex":2,"sizey":1},{"id":412,"x":9,"y":14,"sizex":2,"sizey":1},{"id":455,"x":5,"y":14,"sizex":2,"sizey":1},{"id":459,"x":7,"y":14,"sizex":2,"sizey":2},{"id":443,"x":9,"y":15,"sizex":2,"sizey":1},{"id":489,"x":2,"y":15,"sizex":2,"sizey":1},{"id":448,"x":9,"y":16,"sizex":3,"sizey":2},{"id":474,"x":1,"y":16,"sizex":3,"sizey":2},{"id":481,"x":5,"y":16,"sizex":3,"sizey":1},{"id":471,"x":6,"y":17,"sizex":1,"sizey":2},{"id":477,"x":8,"y":18,"sizex":2,"sizey":3},{"id":482,"x":2,"y":18,"sizex":2,"sizey":3},{"id":451,"x":6,"y":19,"sizex":1,"sizey":3},{"id":470,"x":8,"y":21,"sizex":3,"sizey":3},{"id":479,"x":2,"y":21,"sizex":3,"sizey":1},{"id":464,"x":6,"y":22,"sizex":1,"sizey":1},{"id":480,"x":3,"y":22,"sizex":2,"sizey":2},{"id":449,"x":6,"y":23,"sizex":2,"sizey":3},{"id":468,"x":9,"y":24,"sizex":3,"sizey":3},{"id":475,"x":4,"y":24,"sizex":2,"sizey":3},{"id":467,"x":9,"y":27,"sizex":2,"sizey":3},{"id":473,"x":2,"y":27,"sizex":3,"sizey":2},{"id":465,"x":3,"y":29,"sizex":2,"sizey":3},{"id":462,"x":8,"y":30,"sizex":2,"sizey":3},{"id":458,"x":1,"y":32,"sizex":3,"sizey":2},{"id":463,"x":4,"y":32,"sizex":1,"sizey":3},{"id":348,"x":7,"y":33,"sizex":2,"sizey":1},{"id":452,"x":7,"y":34,"sizex":2,"sizey":3},{"id":460,"x":1,"y":34,"sizex":1,"sizey":2},{"id":461,"x":2,"y":35,"sizex":3,"sizey":3},{"id":407,"x":8,"y":37,"sizex":3,"sizey":2},{"id":457,"x":4,"y":38,"sizex":2,"sizey":2},{"id":401,"x":8,"y":39,"sizex":2,"sizey":1},{"id":446,"x":4,"y":40,"sizex":2,"sizey":2},{"id":447,"x":8,"y":40,"sizex":1,"sizey":2},{"id":420,"x":2,"y":42,"sizex":3,"sizey":2},{"id":427,"x":8,"y":42,"sizex":2,"sizey":2},{"id":440,"x":5,"y":42,"sizex":2,"sizey":2},{"id":428,"x":9,"y":44,"sizex":3,"sizey":2},{"id":441,"x":1,"y":44,"sizex":2,"sizey":1},{"id":444,"x":4,"y":44,"sizex":2,"sizey":2},{"id":445,"x":1,"y":45,"sizex":2,"sizey":1},{"id":422,"x":8,"y":46,"sizex":2,"sizey":3},{"id":423,"x":1,"y":46,"sizex":2,"sizey":1},{"id":433,"x":5,"y":46,"sizex":1,"sizey":3},{"id":436,"x":3,"y":46,"sizex":2,"sizey":3},{"id":434,"x":1,"y":47,"sizex":1,"sizey":2},{"id":354,"x":5,"y":49,"sizex":2,"sizey":1},{"id":417,"x":8,"y":49,"sizex":2,"sizey":2},{"id":438,"x":1,"y":49,"sizex":2,"sizey":2},{"id":429,"x":6,"y":50,"sizex":2,"sizey":1},{"id":439,"x":4,"y":51,"sizex":3,"sizey":3},{"id":383,"x":6,"y":54,"sizex":1,"sizey":1},{"id":432,"x":4,"y":54,"sizex":2,"sizey":1},{"id":435,"x":6,"y":55,"sizex":2,"sizey":3},{"id":437,"x":2,"y":55,"sizex":3,"sizey":2},{"id":430,"x":4,"y":57,"sizex":2,"sizey":2},{"id":431,"x":3,"y":59,"sizex":2,"sizey":2},{"id":426,"x":3,"y":61,"sizex":2,"sizey":2},{"id":396,"x":4,"y":63,"sizex":1,"sizey":1},{"id":425,"x":3,"y":64,"sizex":3,"sizey":2},{"id":419,"x":5,"y":66,"sizex":2,"sizey":3},{"id":424,"x":2,"y":66,"sizex":2,"sizey":2},{"id":421,"x":6,"y":69,"sizex":2,"sizey":2},{"id":418,"x":4,"y":71,"sizex":3,"sizey":3},{"id":415,"x":6,"y":74,"sizex":2,"sizey":3},{"id":416,"x":2,"y":74,"sizex":3,"sizey":3},{"id":406,"x":5,"y":77,"sizex":2,"sizey":2},{"id":409,"x":2,"y":77,"sizex":1,"sizey":2},{"id":411,"x":4,"y":77,"sizex":1,"sizey":3},{"id":394,"x":2,"y":79,"sizex":1,"sizey":2},{"id":405,"x":5,"y":79,"sizex":1,"sizey":2},{"id":410,"x":6,"y":79,"sizex":3,"sizey":2},{"id":388,"x":4,"y":81,"sizex":2,"sizey":2},{"id":391,"x":7,"y":81,"sizex":2,"sizey":3},{"id":408,"x":2,"y":81,"sizex":1,"sizey":2},{"id":413,"x":5,"y":83,"sizex":2,"sizey":2},{"id":414,"x":2,"y":83,"sizex":2,"sizey":2},{"id":404,"x":8,"y":84,"sizex":2,"sizey":2},{"id":395,"x":5,"y":85,"sizex":2,"sizey":2},{"id":400,"x":3,"y":85,"sizex":2,"sizey":2},{"id":402,"x":4,"y":87,"sizex":1,"sizey":1},{"id":403,"x":5,"y":87,"sizex":3,"sizey":1},{"id":381,"x":4,"y":88,"sizex":1,"sizey":2},{"id":399,"x":5,"y":88,"sizex":3,"sizey":2},{"id":343,"x":2,"y":90,"sizex":3,"sizey":1},{"id":397,"x":7,"y":90,"sizex":2,"sizey":2},{"id":389,"x":1,"y":91,"sizex":2,"sizey":2},{"id":392,"x":3,"y":91,"sizex":2,"sizey":2},{"id":357,"x":8,"y":92,"sizex":3,"sizey":1},{"id":387,"x":6,"y":92,"sizex":2,"sizey":1},{"id":385,"x":2,"y":93,"sizex":3,"sizey":2},{"id":386,"x":7,"y":93,"sizex":1,"sizey":2},{"id":393,"x":9,"y":93,"sizex":2,"sizey":1},{"id":398,"x":8,"y":94,"sizex":2,"sizey":1},{"id":363,"x":3,"y":95,"sizex":1,"sizey":2},{"id":365,"x":2,"y":95,"sizex":1,"sizey":3},{"id":390,"x":8,"y":95,"sizex":2,"sizey":3},{"id":380,"x":3,"y":97,"sizex":1,"sizey":1},{"id":371,"x":3,"y":98,"sizex":2,"sizey":1},{"id":372,"x":7,"y":98,"sizex":3,"sizey":2},{"id":361,"x":3,"y":99,"sizex":3,"sizey":1},{"id":377,"x":9,"y":100,"sizex":1,"sizey":1},{"id":379,"x":3,"y":100,"sizex":2,"sizey":2},{"id":384,"x":8,"y":101,"sizex":2,"sizey":1},{"id":375,"x":2,"y":102,"sizex":2,"sizey":3},{"id":376,"x":8,"y":102,"sizex":2,"sizey":2},{"id":378,"x":4,"y":102,"sizex":2,"sizey":2},{"id":370,"x":9,"y":104,"sizex":2,"sizey":3},{"id":374,"x":4,"y":104,"sizex":2,"sizey":3},{"id":382,"x":8,"y":104,"sizex":1,"sizey":3},{"id":366,"x":2,"y":107,"sizex":3,"sizey":2},{"id":368,"x":8,"y":107,"sizex":1,"sizey":3},{"id":373,"x":2,"y":109,"sizex":2,"sizey":2},{"id":364,"x":7,"y":110,"sizex":2,"sizey":2},{"id":369,"x":2,"y":111,"sizex":3,"sizey":3},{"id":339,"x":5,"y":112,"sizex":3,"sizey":2},{"id":359,"x":8,"y":112,"sizex":2,"sizey":2},{"id":301,"x":8,"y":114,"sizex":3,"sizey":1},{"id":335,"x":2,"y":114,"sizex":3,"sizey":2},{"id":367,"x":5,"y":114,"sizex":2,"sizey":3},{"id":352,"x":9,"y":115,"sizex":3,"sizey":1},{"id":356,"x":8,"y":116,"sizex":2,"sizey":2},{"id":358,"x":3,"y":116,"sizex":2,"sizey":2},{"id":350,"x":5,"y":117,"sizex":2,"sizey":2},{"id":353,"x":7,"y":118,"sizex":3,"sizey":1},{"id":331,"x":6,"y":119,"sizex":3,"sizey":1},{"id":362,"x":4,"y":119,"sizex":2,"sizey":2},{"id":349,"x":8,"y":120,"sizex":1,"sizey":2},{"id":355,"x":6,"y":120,"sizex":1,"sizey":3},{"id":344,"x":5,"y":121,"sizex":1,"sizey":1},{"id":360,"x":3,"y":121,"sizex":2,"sizey":2},{"id":346,"x":7,"y":122,"sizex":2,"sizey":1},{"id":317,"x":1,"y":123,"sizex":3,"sizey":2},{"id":341,"x":4,"y":123,"sizex":2,"sizey":2},{"id":345,"x":6,"y":123,"sizex":1,"sizey":3},{"id":174,"x":1,"y":125,"sizex":1,"sizey":1},{"id":340,"x":2,"y":125,"sizex":2,"sizey":1},{"id":347,"x":4,"y":125,"sizex":1,"sizey":3},{"id":338,"x":6,"y":126,"sizex":2,"sizey":3},{"id":351,"x":1,"y":126,"sizex":3,"sizey":1},{"id":286,"x":1,"y":127,"sizex":1,"sizey":3},{"id":327,"x":2,"y":127,"sizex":2,"sizey":2},{"id":328,"x":4,"y":128,"sizex":2,"sizey":2},{"id":307,"x":2,"y":129,"sizex":2,"sizey":2},{"id":337,"x":7,"y":129,"sizex":2,"sizey":3},{"id":281,"x":4,"y":130,"sizex":1,"sizey":2},{"id":287,"x":1,"y":130,"sizex":1,"sizey":2},{"id":284,"x":2,"y":131,"sizex":1,"sizey":3},{"id":321,"x":3,"y":131,"sizex":1,"sizey":2},{"id":318,"x":5,"y":132,"sizex":3,"sizey":1},{"id":332,"x":8,"y":132,"sizex":1,"sizey":2},{"id":342,"x":4,"y":132,"sizex":1,"sizey":2},{"id":326,"x":7,"y":133,"sizex":1,"sizey":1},{"id":333,"x":5,"y":133,"sizex":2,"sizey":1},{"id":300,"x":2,"y":134,"sizex":1,"sizey":3},{"id":322,"x":6,"y":134,"sizex":2,"sizey":1},{"id":324,"x":8,"y":134,"sizex":2,"sizey":3},{"id":336,"x":4,"y":134,"sizex":1,"sizey":1},{"id":334,"x":4,"y":135,"sizex":3,"sizey":2},{"id":314,"x":3,"y":137,"sizex":2,"sizey":2},{"id":325,"x":8,"y":137,"sizex":2,"sizey":2},{"id":330,"x":5,"y":137,"sizex":2,"sizey":2},{"id":289,"x":2,"y":139,"sizex":2,"sizey":1},{"id":311,"x":6,"y":139,"sizex":2,"sizey":1},{"id":316,"x":8,"y":139,"sizex":3,"sizey":3},{"id":298,"x":2,"y":140,"sizex":2,"sizey":2},{"id":329,"x":5,"y":140,"sizex":2,"sizey":2},{"id":268,"x":2,"y":142,"sizex":1,"sizey":3},{"id":304,"x":5,"y":142,"sizex":2,"sizey":2},{"id":319,"x":8,"y":142,"sizex":1,"sizey":2},{"id":320,"x":8,"y":144,"sizex":2,"sizey":2},{"id":323,"x":5,"y":144,"sizex":2,"sizey":3},{"id":315,"x":9,"y":146,"sizex":2,"sizey":3},{"id":312,"x":6,"y":147,"sizex":1,"sizey":3},{"id":177,"x":9,"y":149,"sizex":1,"sizey":1},{"id":303,"x":6,"y":150,"sizex":2,"sizey":2},{"id":308,"x":9,"y":150,"sizex":3,"sizey":3},{"id":305,"x":5,"y":152,"sizex":2,"sizey":2},{"id":313,"x":9,"y":153,"sizex":2,"sizey":2},{"id":288,"x":5,"y":154,"sizex":2,"sizey":2},{"id":310,"x":8,"y":155,"sizex":2,"sizey":2},{"id":306,"x":5,"y":156,"sizex":3,"sizey":3},{"id":309,"x":8,"y":157,"sizex":2,"sizey":3},{"id":296,"x":4,"y":159,"sizex":2,"sizey":2},{"id":299,"x":6,"y":159,"sizex":2,"sizey":2},{"id":285,"x":7,"y":161,"sizex":3,"sizey":2},{"id":293,"x":4,"y":161,"sizex":2,"sizey":1},{"id":302,"x":5,"y":162,"sizex":2,"sizey":2},{"id":291,"x":7,"y":163,"sizex":3,"sizey":2},{"id":290,"x":5,"y":164,"sizex":2,"sizey":2},{"id":295,"x":7,"y":165,"sizex":1,"sizey":1},{"id":277,"x":3,"y":166,"sizex":3,"sizey":3},{"id":297,"x":7,"y":166,"sizex":2,"sizey":3},{"id":262,"x":2,"y":169,"sizex":3,"sizey":2},{"id":292,"x":7,"y":169,"sizex":2,"sizey":2},{"id":273,"x":2,"y":171,"sizex":2,"sizey":3},{"id":282,"x":6,"y":171,"sizex":2,"sizey":3},{"id":294,"x":8,"y":171,"sizex":1,"sizey":2},{"id":264,"x":2,"y":174,"sizex":1,"sizey":2},{"id":267,"x":7,"y":174,"sizex":2,"sizey":1},{"id":269,"x":5,"y":174,"sizex":2,"sizey":2},{"id":278,"x":8,"y":175,"sizex":2,"sizey":3},{"id":253,"x":2,"y":176,"sizex":2,"sizey":3},{"id":283,"x":6,"y":176,"sizex":2,"sizey":3},{"id":195,"x":9,"y":178,"sizex":3,"sizey":1},{"id":258,"x":1,"y":179,"sizex":2,"sizey":3},{"id":279,"x":8,"y":179,"sizex":2,"sizey":3},{"id":280,"x":6,"y":179,"sizex":1,"sizey":3},{"id":255,"x":2,"y":182,"sizex":1,"sizey":2},{"id":275,"x":5,"y":182,"sizex":2,"sizey":2},{"id":276,"x":7,"y":182,"sizex":3,"sizey":2},{"id":247,"x":1,"y":184,"sizex":2,"sizey":2},{"id":257,"x":4,"y":184,"sizex":2,"sizey":2},{"id":272,"x":7,"y":184,"sizex":2,"sizey":3},{"id":191,"x":2,"y":186,"sizex":1,"sizey":2},{"id":215,"x":1,"y":186,"sizex":1,"sizey":1},{"id":263,"x":3,"y":186,"sizex":2,"sizey":3},{"id":225,"x":1,"y":187,"sizex":1,"sizey":1},{"id":266,"x":6,"y":187,"sizex":2,"sizey":2},{"id":270,"x":8,"y":187,"sizex":1,"sizey":2},{"id":250,"x":1,"y":188,"sizex":1,"sizey":2},{"id":203,"x":8,"y":189,"sizex":1,"sizey":2},{"id":243,"x":3,"y":189,"sizex":2,"sizey":1},{"id":254,"x":6,"y":189,"sizex":2,"sizey":2},{"id":252,"x":3,"y":190,"sizex":1,"sizey":1},{"id":256,"x":3,"y":191,"sizex":3,"sizey":2},{"id":271,"x":8,"y":191,"sizex":2,"sizey":1},{"id":274,"x":6,"y":191,"sizex":2,"sizey":3},{"id":244,"x":4,"y":193,"sizex":2,"sizey":2},{"id":260,"x":7,"y":194,"sizex":2,"sizey":2},{"id":265,"x":6,"y":194,"sizex":1,"sizey":1},{"id":199,"x":3,"y":195,"sizex":3,"sizey":1},{"id":245,"x":4,"y":196,"sizex":2,"sizey":1},{"id":251,"x":3,"y":196,"sizex":1,"sizey":1},{"id":261,"x":7,"y":196,"sizex":2,"sizey":2},{"id":219,"x":2,"y":197,"sizex":2,"sizey":1},{"id":233,"x":4,"y":197,"sizex":2,"sizey":1},{"id":228,"x":2,"y":198,"sizex":2,"sizey":2},{"id":231,"x":5,"y":198,"sizex":2,"sizey":2},{"id":240,"x":7,"y":198,"sizex":1,"sizey":2},{"id":237,"x":7,"y":200,"sizex":3,"sizey":3},{"id":246,"x":2,"y":200,"sizex":2,"sizey":3},{"id":234,"x":3,"y":203,"sizex":1,"sizey":2},{"id":238,"x":9,"y":203,"sizex":2,"sizey":2},{"id":241,"x":2,"y":203,"sizex":1,"sizey":3},{"id":259,"x":7,"y":203,"sizex":2,"sizey":2},{"id":248,"x":7,"y":205,"sizex":2,"sizey":3},{"id":249,"x":9,"y":205,"sizex":3,"sizey":3},{"id":235,"x":8,"y":208,"sizex":2,"sizey":2},{"id":239,"x":5,"y":208,"sizex":3,"sizey":2},{"id":209,"x":9,"y":210,"sizex":2,"sizey":2},{"id":242,"x":5,"y":210,"sizex":2,"sizey":2},{"id":226,"x":5,"y":212,"sizex":3,"sizey":3},{"id":230,"x":8,"y":212,"sizex":2,"sizey":2},{"id":236,"x":8,"y":214,"sizex":3,"sizey":1},{"id":232,"x":6,"y":215,"sizex":3,"sizey":1},{"id":216,"x":4,"y":216,"sizex":3,"sizey":1},{"id":221,"x":7,"y":216,"sizex":1,"sizey":3},{"id":220,"x":4,"y":217,"sizex":1,"sizey":3},{"id":229,"x":5,"y":217,"sizex":2,"sizey":2},{"id":217,"x":5,"y":219,"sizex":2,"sizey":2},{"id":227,"x":6,"y":221,"sizex":2,"sizey":1},{"id":223,"x":7,"y":222,"sizex":2,"sizey":3},{"id":224,"x":6,"y":225,"sizex":2,"sizey":3},{"id":218,"x":5,"y":228,"sizex":3,"sizey":2},{"id":208,"x":6,"y":230,"sizex":2,"sizey":2},{"id":222,"x":5,"y":230,"sizex":1,"sizey":1},{"id":184,"x":3,"y":231,"sizex":3,"sizey":3},{"id":185,"x":6,"y":232,"sizex":1,"sizey":2},{"id":212,"x":7,"y":232,"sizex":2,"sizey":3},{"id":213,"x":3,"y":234,"sizex":1,"sizey":2},{"id":214,"x":4,"y":234,"sizex":3,"sizey":3},{"id":186,"x":7,"y":235,"sizex":1,"sizey":2},{"id":210,"x":8,"y":235,"sizex":2,"sizey":1},{"id":181,"x":8,"y":236,"sizex":1,"sizey":3},{"id":196,"x":9,"y":236,"sizex":2,"sizey":2},{"id":201,"x":3,"y":237,"sizex":3,"sizey":1},{"id":205,"x":6,"y":237,"sizex":1,"sizey":2},{"id":197,"x":9,"y":238,"sizex":1,"sizey":2},{"id":211,"x":2,"y":238,"sizex":2,"sizey":2},{"id":198,"x":8,"y":239,"sizex":1,"sizey":2},{"id":207,"x":6,"y":239,"sizex":1,"sizey":2},{"id":190,"x":8,"y":241,"sizex":1,"sizey":2},{"id":194,"x":6,"y":241,"sizex":2,"sizey":2},{"id":182,"x":8,"y":243,"sizex":1,"sizey":3},{"id":193,"x":5,"y":243,"sizex":3,"sizey":1},{"id":204,"x":4,"y":244,"sizex":2,"sizey":1},{"id":206,"x":6,"y":244,"sizex":1,"sizey":2},{"id":202,"x":4,"y":245,"sizex":2,"sizey":2},{"id":200,"x":5,"y":247,"sizex":2,"sizey":2},{"id":192,"x":3,"y":249,"sizex":3,"sizey":3},{"id":189,"x":3,"y":252,"sizex":2,"sizey":1},{"id":173,"x":4,"y":253,"sizex":2,"sizey":2},{"id":175,"x":1,"y":253,"sizex":3,"sizey":3},{"id":188,"x":5,"y":255,"sizex":3,"sizey":2},{"id":187,"x":1,"y":256,"sizex":2,"sizey":2},{"id":171,"x":7,"y":257,"sizex":3,"sizey":3},{"id":170,"x":2,"y":258,"sizex":3,"sizey":2},{"id":179,"x":1,"y":258,"sizex":1,"sizey":2},{"id":178,"x":9,"y":260,"sizex":1,"sizey":1},{"id":180,"x":2,"y":260,"sizex":2,"sizey":2},{"id":183,"x":4,"y":260,"sizex":2,"sizey":2},{"id":160,"x":8,"y":261,"sizex":2,"sizey":3},{"id":158,"x":3,"y":262,"sizex":2,"sizey":2},{"id":172,"x":2,"y":262,"sizex":1,"sizey":2},{"id":162,"x":7,"y":264,"sizex":2,"sizey":2},{"id":166,"x":1,"y":264,"sizex":2,"sizey":3},{"id":167,"x":4,"y":264,"sizex":1,"sizey":1},{"id":176,"x":9,"y":264,"sizex":2,"sizey":2},{"id":145,"x":4,"y":265,"sizex":3,"sizey":2},{"id":138,"x":8,"y":266,"sizex":2,"sizey":2},{"id":165,"x":2,"y":267,"sizex":1,"sizey":2},{"id":168,"x":5,"y":267,"sizex":1,"sizey":1},{"id":152,"x":8,"y":268,"sizex":2,"sizey":1},{"id":155,"x":5,"y":268,"sizex":2,"sizey":2},{"id":169,"x":2,"y":269,"sizex":3,"sizey":2},{"id":164,"x":6,"y":270,"sizex":2,"sizey":3},{"id":136,"x":2,"y":271,"sizex":2,"sizey":2},{"id":133,"x":7,"y":273,"sizex":3,"sizey":3},{"id":153,"x":2,"y":273,"sizex":1,"sizey":2},{"id":156,"x":3,"y":273,"sizex":1,"sizey":1},{"id":159,"x":3,"y":274,"sizex":2,"sizey":2},{"id":154,"x":2,"y":275,"sizex":1,"sizey":1},{"id":148,"x":7,"y":276,"sizex":1,"sizey":1},{"id":157,"x":9,"y":276,"sizex":1,"sizey":1},{"id":163,"x":2,"y":276,"sizex":2,"sizey":2},{"id":139,"x":8,"y":277,"sizex":2,"sizey":2},{"id":161,"x":3,"y":278,"sizex":2,"sizey":1},{"id":141,"x":3,"y":279,"sizex":3,"sizey":2},{"id":151,"x":8,"y":279,"sizex":2,"sizey":1},{"id":142,"x":8,"y":280,"sizex":3,"sizey":3},{"id":143,"x":3,"y":281,"sizex":2,"sizey":1},{"id":149,"x":5,"y":281,"sizex":2,"sizey":3},{"id":146,"x":3,"y":282,"sizex":2,"sizey":1},{"id":132,"x":2,"y":283,"sizex":2,"sizey":2},{"id":147,"x":4,"y":283,"sizex":1,"sizey":2},{"id":137,"x":6,"y":284,"sizex":2,"sizey":3},{"id":144,"x":3,"y":285,"sizex":1,"sizey":2},{"id":150,"x":4,"y":285,"sizex":2,"sizey":1},{"id":83,"x":7,"y":287,"sizex":1,"sizey":1},{"id":140,"x":3,"y":287,"sizex":2,"sizey":3},{"id":135,"x":7,"y":288,"sizex":3,"sizey":1},{"id":124,"x":6,"y":289,"sizex":2,"sizey":2},{"id":128,"x":8,"y":289,"sizex":2,"sizey":3},{"id":127,"x":2,"y":290,"sizex":2,"sizey":2},{"id":100,"x":8,"y":292,"sizex":2,"sizey":2},{"id":116,"x":3,"y":292,"sizex":3,"sizey":2},{"id":131,"x":1,"y":292,"sizex":2,"sizey":1},{"id":117,"x":1,"y":293,"sizex":2,"sizey":2},{"id":121,"x":9,"y":294,"sizex":3,"sizey":2},{"id":126,"x":7,"y":294,"sizex":2,"sizey":1},{"id":130,"x":5,"y":294,"sizex":2,"sizey":2},{"id":134,"x":3,"y":294,"sizex":1,"sizey":2},{"id":82,"x":1,"y":296,"sizex":3,"sizey":1},{"id":109,"x":5,"y":296,"sizex":3,"sizey":3},{"id":129,"x":8,"y":296,"sizex":2,"sizey":2},{"id":114,"x":3,"y":297,"sizex":2,"sizey":2},{"id":125,"x":2,"y":297,"sizex":1,"sizey":1},{"id":119,"x":8,"y":298,"sizex":2,"sizey":3},{"id":122,"x":2,"y":299,"sizex":3,"sizey":2},{"id":123,"x":6,"y":299,"sizex":2,"sizey":2},{"id":96,"x":2,"y":301,"sizex":2,"sizey":2},{"id":103,"x":4,"y":301,"sizex":1,"sizey":2},{"id":112,"x":8,"y":301,"sizex":1,"sizey":3},{"id":113,"x":9,"y":301,"sizex":3,"sizey":2},{"id":118,"x":6,"y":301,"sizex":2,"sizey":2},{"id":94,"x":7,"y":303,"sizex":1,"sizey":2},{"id":108,"x":2,"y":303,"sizex":2,"sizey":2},{"id":120,"x":4,"y":303,"sizex":3,"sizey":3},{"id":111,"x":8,"y":304,"sizex":1,"sizey":3},{"id":91,"x":1,"y":305,"sizex":3,"sizey":3},{"id":115,"x":5,"y":306,"sizex":2,"sizey":2},{"id":87,"x":8,"y":307,"sizex":3,"sizey":2},{"id":77,"x":2,"y":308,"sizex":1,"sizey":2},{"id":110,"x":6,"y":308,"sizex":1,"sizey":2},{"id":105,"x":9,"y":309,"sizex":2,"sizey":1},{"id":106,"x":8,"y":309,"sizex":1,"sizey":2},{"id":98,"x":5,"y":310,"sizex":2,"sizey":2},{"id":89,"x":8,"y":311,"sizex":2,"sizey":2},{"id":102,"x":4,"y":312,"sizex":2,"sizey":1},{"id":78,"x":4,"y":313,"sizex":3,"sizey":2},{"id":107,"x":8,"y":313,"sizex":2,"sizey":2},{"id":97,"x":4,"y":315,"sizex":3,"sizey":1},{"id":104,"x":8,"y":315,"sizex":2,"sizey":3},{"id":99,"x":4,"y":316,"sizex":2,"sizey":2},{"id":93,"x":8,"y":318,"sizex":2,"sizey":2},{"id":101,"x":3,"y":318,"sizex":3,"sizey":2},{"id":9,"x":9,"y":320,"sizex":3,"sizey":3},{"id":85,"x":7,"y":320,"sizex":2,"sizey":2},{"id":95,"x":3,"y":320,"sizex":1,"sizey":3},{"id":66,"x":8,"y":322,"sizex":1,"sizey":3},{"id":79,"x":9,"y":323,"sizex":2,"sizey":3},{"id":90,"x":3,"y":323,"sizex":3,"sizey":2},{"id":80,"x":7,"y":325,"sizex":2,"sizey":3},{"id":84,"x":5,"y":325,"sizex":1,"sizey":3},{"id":92,"x":3,"y":325,"sizex":2,"sizey":1},{"id":43,"x":9,"y":326,"sizex":2,"sizey":2},{"id":72,"x":3,"y":326,"sizex":2,"sizey":2},{"id":74,"x":3,"y":328,"sizex":1,"sizey":3},{"id":76,"x":8,"y":328,"sizex":2,"sizey":2},{"id":86,"x":5,"y":328,"sizex":2,"sizey":2},{"id":88,"x":4,"y":328,"sizex":1,"sizey":2},{"id":73,"x":8,"y":330,"sizex":3,"sizey":2},{"id":81,"x":4,"y":330,"sizex":3,"sizey":2},{"id":67,"x":2,"y":332,"sizex":3,"sizey":2},{"id":70,"x":9,"y":332,"sizex":1,"sizey":2},{"id":68,"x":8,"y":334,"sizex":3,"sizey":2},{"id":75,"x":3,"y":334,"sizex":2,"sizey":2},{"id":69,"x":4,"y":336,"sizex":2,"sizey":3},{"id":71,"x":1,"y":336,"sizex":3,"sizey":3},{"id":32,"x":4,"y":339,"sizex":3,"sizey":1},{"id":53,"x":2,"y":339,"sizex":1,"sizey":2},{"id":45,"x":5,"y":340,"sizex":3,"sizey":1},{"id":64,"x":2,"y":341,"sizex":3,"sizey":1},{"id":65,"x":6,"y":341,"sizex":2,"sizey":2},{"id":60,"x":2,"y":342,"sizex":1,"sizey":3},{"id":62,"x":4,"y":342,"sizex":2,"sizey":3},{"id":54,"x":6,"y":343,"sizex":3,"sizey":2},{"id":56,"x":8,"y":345,"sizex":2,"sizey":1},{"id":59,"x":3,"y":345,"sizex":2,"sizey":3},{"id":63,"x":8,"y":346,"sizex":2,"sizey":3},{"id":36,"x":3,"y":348,"sizex":3,"sizey":2},{"id":58,"x":7,"y":349,"sizex":2,"sizey":2},{"id":61,"x":2,"y":350,"sizex":3,"sizey":2},{"id":57,"x":8,"y":351,"sizex":2,"sizey":2},{"id":31,"x":1,"y":352,"sizex":2,"sizey":2},{"id":44,"x":7,"y":353,"sizex":2,"sizey":2},{"id":55,"x":9,"y":353,"sizex":1,"sizey":2},{"id":51,"x":2,"y":354,"sizex":1,"sizey":2},{"id":49,"x":7,"y":355,"sizex":2,"sizey":2},{"id":52,"x":1,"y":356,"sizex":2,"sizey":3},{"id":13,"x":6,"y":357,"sizex":3,"sizey":2},{"id":40,"x":2,"y":359,"sizex":3,"sizey":2},{"id":50,"x":7,"y":359,"sizex":3,"sizey":1},{"id":28,"x":6,"y":360,"sizex":3,"sizey":2},{"id":47,"x":1,"y":361,"sizex":2,"sizey":1},{"id":46,"x":7,"y":362,"sizex":2,"sizey":1},{"id":48,"x":2,"y":362,"sizex":2,"sizey":1},{"id":3,"x":1,"y":363,"sizex":2,"sizey":2},{"id":37,"x":3,"y":363,"sizex":1,"sizey":2},{"id":42,"x":6,"y":363,"sizex":3,"sizey":3},{"id":21,"x":1,"y":365,"sizex":1,"sizey":2},{"id":38,"x":8,"y":366,"sizex":1,"sizey":2},{"id":39,"x":5,"y":366,"sizex":2,"sizey":3},{"id":30,"x":8,"y":368,"sizex":2,"sizey":2},{"id":41,"x":4,"y":369,"sizex":2,"sizey":2},{"id":4,"x":7,"y":370,"sizex":2,"sizey":2},{"id":14,"x":9,"y":370,"sizex":2,"sizey":2},{"id":16,"x":3,"y":371,"sizex":3,"sizey":3},{"id":11,"x":9,"y":372,"sizex":3,"sizey":2},{"id":12,"x":7,"y":372,"sizex":2,"sizey":1},{"id":20,"x":7,"y":373,"sizex":2,"sizey":2},{"id":33,"x":5,"y":374,"sizex":1,"sizey":3},{"id":34,"x":2,"y":374,"sizex":3,"sizey":3},{"id":27,"x":8,"y":375,"sizex":2,"sizey":3},{"id":35,"x":4,"y":377,"sizex":1,"sizey":3},{"id":25,"x":8,"y":378,"sizex":2,"sizey":2},{"id":1,"x":8,"y":380,"sizex":2,"sizey":3},{"id":6,"x":3,"y":380,"sizex":2,"sizey":2},{"id":26,"x":1,"y":382,"sizex":3,"sizey":2},{"id":29,"x":4,"y":382,"sizex":1,"sizey":2},{"id":7,"x":8,"y":383,"sizex":2,"sizey":2},{"id":22,"x":1,"y":384,"sizex":2,"sizey":3},{"id":23,"x":4,"y":384,"sizex":2,"sizey":3},{"id":8,"x":9,"y":385,"sizex":3,"sizey":2},{"id":24,"x":2,"y":387,"sizex":2,"sizey":2},{"id":19,"x":3,"y":389,"sizex":2,"sizey":3},{"id":5,"x":2,"y":392,"sizex":2,"sizey":3},{"id":18,"x":4,"y":392,"sizex":2,"sizey":1},{"id":17,"x":4,"y":393,"sizex":3,"sizey":3},{"id":15,"x":1,"y":395,"sizex":2,"sizey":2},{"id":2,"x":4,"y":396,"sizex":2,"sizey":2},{"id":10,"x":5,"y":398,"sizex":1,"sizey":3}]
            })
            return {
                myList: list.myList,
                baseWidth: 0,
                baseHeight: 0,
                renderState:"渲染中..."
            }
        },
        components: {
            'power-drag': drag
        },
        name: 'app',
        methods: {
            getList() {
                let gridster = this.$refs['cyGridster']; //获取gridster实例
                console.log(JSON.stringify(gridster.getList()));
            }
        },
        created() {
            //屏幕适配，使得当前布局能在所有分辨率下适用，示例是在1366*638分辨率下完成
            let screenWidth = window.innerWidth;
            let screenHeight = window.innerHeight;
            this.baseWidth = 90.8333 * (screenWidth / 1366);
            this.baseHeight = 100 * (screenHeight / 638);
            this.baseMarginLeft = 20 * (screenWidth / 1366);
            this.baseMarginTop = 20 * (screenHeight / 638);

            this.$nextTick(function () {
                $(".dragAndResize").css("width", "calc(100% - " + (this.baseMarginLeft) + "px)")
            })
        },
        mounted() {
            let vm=this;
            let gridster = this.$refs['cyGridster']; //获取gridster实例
            gridster.init(); //在适当的时候初始化布局组件
            gridster.afterInitOk(function(){
                vm.renderState="渲染完毕";
            })
        }
    }

</script>

<style lang='less' scoped>
    body {
        overflow-x: hidden;
        & * {
            box-sizing: border-box;
        }
    }

    #demo {
        width: 100%;
        padding: 1.5em 0 1.5em 0;

        .head {
            border-bottom: 1px dashed;
            width: 100%;

            padding-left: 20px;

            height: 50px;

            a {
                text-decoration: none;
                color: black;
            }
        }

        .arrow {
            font-size: 20px;

            position: relative;
            margin-right:10px;
            top:2px;
        }
    }

</style>
